
"use client";

import { useState } from "react";
import { Table } from "flowbite-react";
import BookForm from "./BookForm";
export default function BookList({ books }) {

    const [openModal, setOpenModal] = useState(false);

    const [book, setBook] = useState("");

    function modalInfo(info, open) {
        setBook(info);

        setOpenModal(open);
    }

    return <>

        <div className="overflow-x-auto">
            <BookForm openModal={openModal} setOpenModal={setOpenModal} book={book} ></BookForm>
            <Table hoverable>
                <Table.Head>
                    <Table.HeadCell>书名</Table.HeadCell>
                    <Table.HeadCell>作者</Table.HeadCell>
                    <Table.HeadCell>语言</Table.HeadCell>
                    <Table.HeadCell>大小（MB）</Table.HeadCell>
                    <Table.HeadCell>评分</Table.HeadCell>
                    <Table.HeadCell>标签</Table.HeadCell>
                    <Table.HeadCell>丛书</Table.HeadCell>
                    <Table.HeadCell>出版商</Table.HeadCell>
                    <Table.HeadCell>出版日期 </Table.HeadCell>
                </Table.Head>
                <Table.Body className="divide-y">
                    {
                        books.map((book, index) => (
                            <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800" key={index}
                                onClick={() => modalInfo(book, true)}
                            >
                                <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
                                    {book.name}
                                </Table.Cell>
                                <Table.Cell>{book.author}</Table.Cell>
                                <Table.Cell>{book.bookLang}</Table.Cell>
                                <Table.Cell>{book.bookSize}</Table.Cell>
                                <Table.Cell>{book.bookRate}</Table.Cell>
                                <Table.Cell>{book.series}</Table.Cell>
                                <Table.Cell>{book.bookPublish}</Table.Cell>
                                <Table.Cell>{book.bookRate}</Table.Cell>
                            </Table.Row>
                        ))
                    }

                </Table.Body>
            </Table>
        </div>
    </>
}